<template>
    <div>
        <h1>登录</h1>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">账号</td>
                    <td>
                        <input type="text" placeholder="请输入账号" v-model="queryInfo.username">
                    </td>
                </tr>

                <tr>
                    <td align="right">密码</td>
                    <td>
                        <input type="text" placeholder="请输入密码" v-model="queryInfo.pwd">
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="登录" @click="login">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';
import { useUserStore} from '../stores/user';
const router = useRouter()
const route = useRoute()
const userStore = useUserStore();


let queryInfo = reactive({
    username:'',
    pwd:'',
})


const login = () => {
    if(queryInfo.username ==''){
        alert('账号不能为空');
        return;
    }
    if(queryInfo.pwd ==''){
        alert('密码不能为空');
        return;
    }
    axios({
        url:'/api/User/Login',
        method:'get',
        params:queryInfo
    })
    .then((res)=>{
        console.log(res);
        if(res.data == -1){
            alert('账号错误');
            return;
        }
        if(res.data == -2){
            alert('密码错误');
            return;
        }
        if(res.data == 1){
            alert('登录成功');
            userStore.userInfo = res.data;
            router.push('/home');
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}

</script>

<style scoped>

</style>